<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>《{{album['name']}}》</title>
    <link rel="stylesheet" href="{{url_for('static',filename='reset.css')}}">
    <style>
        .main {
            overflow: scroll;
        }

        .main .main-head {
            width: 7.5rem;
            padding: 0.4rem 0 0.4rem 0.4rem;
            background: url('/static/chart_img/head_bg.png') center no-repeat;
            background-size: cover;
            font-size: 0;
        }

        .main .main-head .head-head {
            position: relative;
            display: inline-block;
            vertical-align: top;
            width: 2.54rem;
            height: 2.54rem;
            background: url('{{album["cover_image_url"]}}') center no-repeat;
            background-size: cover;
        }
        .main .main-head .head-head .head-rank{
            position: absolute;
            top:0;
            right:0.15rem;
            background: #7a5df3;
            border-bottom-right-radius: 0.1rem;
            border-bottom-left-radius: 0.1rem;
            padding: 0 0.15rem;
            font-size: 0.18rem;
            color:#fff;
        }
        .main .main-head .head-head p{
            color:#fff;
            font-size: 0.2rem;
            text-align: center;
            position: absolute;
            bottom:0;
            left:50%;
            transform: translateX(-50%);
        }
        .main .main-head .head-head p .head-num{
            font-size: 0.3rem;
            font-weight: bold;
        }

        .main .main-head .head-word {
            display: inline-block;
            vertical-align: top;
            width: 4rem;
            min-height:2.54rem;
            color: #fff;
            margin-left: 0.3rem;
        }

        .main .main-head .head-word p:first-child {
            font-size: 0.3rem;
            font-weight: bold;
            margin-bottom: 0.2rem;
        }

        .main .main-head .head-word p:last-child {
            font-size: 0.22rem;
        }

        .main .main-list {
            width: 7.5rem;
            padding: 0.3rem;
            padding-bottom:1.1rem;
        }

        .main .main-list ul li a{
            display: inline-block;
            position: relative;
            width: 6.9rem;
            height: 1.2rem;
            border-bottom:1px solid #edecec;
            padding-top: 0.16rem;
        }

        .main .main-list ul li a .list-head {
            font-size: 0.3rem;
            font-weight: bold;
            color: #373737;
        }

        .main .main-list ul li a .list-rank {
            padding: 0 0.18rem;
            color: #7a5df3;
            border: 1px solid #7a5df3;
            font-size: 0.22rem;
            border-radius: 0.35rem;
            margin-left: 0.1rem;
            margin-right: 0.1rem;
        }

        .main .main-list ul li a .list-score {
            padding: 0 0.15rem;
            color: #b1b1b1;
            border: 1px solid #b1b1b1;
            font-size: 0.22rem;
            border-radius: 0.35rem;
        }

        .main .main-list ul li a .list-author {
            color: #aaaaaa;
            font-size: 0.24rem;
        }

        .main .main-list ul li a .list-img {
            position: absolute;
            width: 0.42rem;
            height: 0.65rem;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .main .main-bottom {
            position: fixed;
            bottom: 0;
            width: 7.5rem;
            height: 1rem;
            background: #362e3c;
            padding-left: 0.3rem;
            padding-top: 0.3rem;
            font-size: 0.3rem;
        }

        .main .main-bottom .bottom-img {
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            width: 2.58rem;
            height: 0.98rem;
        }

        .main .main-bottom .bottom-download {
            padding: 0.1rem 0.4rem;
            border: 0.01rem solid #fff;
            border-radius: 0.1rem;
            margin-left: 3.6rem;
            margin-right: 0.33rem;
            color: #fff;
        }

        .main .main-bottom .bottom-open {
            padding: 0.1rem 0.4rem;
            background: #8574f9;
            border: 0.01rem solid #8574f9;
            border-radius: 0.1rem;
            color: #fff;
        }
    </style>
    <script type="text/javascript">
        (function () {
            window.zhuge = window.zhuge || [];
            window.zhuge.methods = "_init identify track getDid getSid getKey setSuperProperty setUserProperties setPlatform".split(" ");
            window.zhuge.factory = function (b) {
                return function () {
                    var a = Array.prototype.slice.call(arguments);
                    a.unshift(b);
                    window.zhuge.push(a);
                    return window.zhuge;
                }
            };
            for (var i = 0; i < window.zhuge.methods.length; i++) {
                var key = window.zhuge.methods[i];
                window.zhuge[key] = window.zhuge.factory(key);
            }
            window.zhuge.load = function (b, x) {
                if (!document.getElementById("zhuge-js")) {
                    var a = document.createElement("script");
                    var verDate = new Date();
                    var verStr = verDate.getFullYear().toString() + verDate.getMonth().toString() + verDate.getDate().toString();

                    a.type = "text/javascript";
                    a.id = "zhuge-js";
                    a.async = !0;
                    a.src = (location.protocol == 'http:' ? "http://sdk.zhugeio.com/zhuge.min.js?v=" : 'https://zgsdk.zhugeio.com/zhuge.min.js?v=') + verStr;
                    a.onerror = function () {
                        window.zhuge.identify = window.zhuge.track = function (ename, props, callback) {
                            if (callback && Object.prototype.toString.call(callback) === '[object Function]') callback();
                        };
                    };
                    var c = document.getElementsByTagName("script")[0];
                    c.parentNode.insertBefore(a, c);
                    window.zhuge._init(b, x)
                }
            };
            var ua = window.navigator.userAgent.toLocaleLowerCase();
            var env = window.location.host.indexOf('dev') > 0 || window.location.host.indexOf('pre') > 0
            var debug = env ? true : false;
            var channel = /micromessenger/.test(ua) ? 'wechat' : /weibo/.test(ua) ? 'weibo' : 'other';
            window.zhuge.load('99944c90bdfe483ab3596e7f99f20c2e', {
                debug: debug,   // 埋点是否实时调试
                platform: { //自定义触发环境信息(选填)
                    '版本': 'v4.2'
                },
                superProperty: { //全局的事件属性(选填)
                    '应用名称': 'The ONE智能钢琴（新）'
                },
                utm: {
                    'utm_source': channel
                },
                autoTrack: true,
                //启用全埋点采集（选填，默认false）
                singlePage: false //是否是单页面应用（SPA），启用autoTrack后生效（选填，默认false）
            });
        })();
    </script>
</head>

<script>
    document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px';
    window.onresize = function (e) {
        document.documentElement.style.fontSize = document.documentElement.offsetWidth / 7.5 + 'px';
    }
</script>

<body>
    <div class="main">
        <div class="main-head">
            <div class="head-head">
                <span class="head-rank">{{level[album['level']]}}</span>
                <p>曲目数量 <span class="head-num">{{album['list'] | length}}</span></p>
            </div>
            <div class="head-word">
                <p>{{album['name']}}</p>
                <p>{{album['description']}}</p>
            </div>
        </div>
        <div class="main-list">
            <ul>
                {% for item in album['list'] %}
                    <li class="score-item">
                        <a href="{{album['host'] }}/smart-piano/web/score?score_id={{item['id']}}">
                            <input type="hidden" class="score" value="{{item['id']}}" style="display: none;">
                            <span class="list-head">{{item['name']}}</span>
                            <span class="list-rank">{{level[item['level']]}}</span>
                            {% if item['only_support_88'] == 1 %}
                                <span class="list-score">{{88}}</span>
                            {% endif %}
                            <p class="list-author">{{item['artist']['name']}}</p>
                            <div class="list-img">
                                <img src="{{url_for('static',filename='chart_img/music.png')}}" alt="">
                            </div>
                        </a>
                    </li>
                {% endfor %}
            </ul>
        </div>
        <div class="main-bottom">
            <div class="bottom-img">
                <img src="{{url_for('static', filename='chart_img/logo.png')}}" alt="">
            </div>
            <a href="http://www.1tai.com/download-smartpiano.html"><span class="bottom-download">下载</span></a>
            <a href="#" id="btn"><span class="bottom-open">打开</span></a>
        </div>
    </div>
    <script src="/static/js/jquery-3.3.1.min.js"></script>
    <script src="/static/js/util.js"></script>
    <script>
        var btn = document.querySelector('#btn')
        var ua = window.navigator.userAgent.toLocaleLowerCase()
        var isAndroid = /android/.test(ua)
        var isIOS = /ipad|iphone|ipod/.test(ua)
        var album_name = "{{album['name']}}";
        var universalLink = "{{album['app_url']}}"
        var isWX = /micromessenger/.test(ua)
        var loadApp = document.querySelector('.bottom-download')
        var channel = /micromessenger/.test(ua) ? 'wechat' : /weibo/.test(ua) ? 'weibo' : 'other';

        universalLink = formatUrl(universalLink)

        universalLink = universalLink + '&from=' + encodeURIComponent(channel) + '&album_name=' + encodeURIComponent(album_name) + '&from_page=' + encodeURIComponent('曲集')

        btn.addEventListener('click', function() {
            zhuge.track('曲集分享页-点击打开', {
                '曲集名称': album_name,
                '分享渠道': channel
            })
            window.location.href = universalLink;
        }, false)

        zhuge.track('点击分享链接', {
            '分享内容': '曲集',
            '分享渠道': channel
        })


        loadApp.addEventListener('click', function() {
            zhuge.track('曲集分享页-点击下载', {
                '曲集名称': album_name,
                '分享渠道': channel
            })
        }, false)
    </script>
</body>

</html>